<template>
    <div id="apo">
        <nav class="top">
            <h1>找回密码</h1>
            <a class="top-z-1" href="./login">返回</a>
          </nav>
          <section class="top-z">
            <div class="top-z-a">
              <div class="top-z-b t11" >
                <input class="top-z-inp" v-model="obj.username" @mouseleave="wang" type="text" placeholder="请输入用户名">
                <div class="top-z-p1">请输入用户名</div>
              </div>
              <div class="top-z-b t22" >
                <div class="top-z-i">
                  <input class="top-z-inp1"  v-model="obj.password" @mouseleave="wang1" :type="password" placeholder="请输入6-12位非纯数字新密码">
                  <i class="top-z-i1" @click="yan"></i>
                </div>
                <div class="top-z-p2">请输入密码</div>
              </div>
              <div class="top-z-b t33" >
                <div class="top-z-b1">
                  <input class="top-z-inp2" v-model="obj.password1" @mouseleave="wang2" type="text" placeholder="请确认密码">
                  <!-- <div class="top-z-b2">
                    <button class="top-z-b3" @click="huoqu">获取验证码</button>
                  </div> -->
                </div>
                <div class="top-z-p3">请确认密码</div>
              </div>
              <button class="top-z-d" @click="zhao1">找回密码</button>
              <div class="top-z-w"><span>无法获取验证码？</span></div>
            </div>
          </section>
          <nav class="ttop-1" @click="huo">
            
          </nav>
          <div class="ttop-2">
            <div class="ttop-3"></div>
            <div class="ttop-4">请输入图片验证码确认你不是机器人：</div>
            <div class="ttop-5">
              <input type="text" maxlength="4" placeholder="请输入验证码">
              <div class="ttop-6">
              <img src="	https://m.doumi.com/api/v1/client/showCkCode?rand=0.3989210044310061" alt="">
              </div>
            </div>
            <div class="ttop-7">
                <button class="ttop-8" @click="qu">取消</button>
                <button class="ttop-9"  @click="open">确认</button>
            </div>
          </div>
        </div>
        <div class="too">获取验证码成功</div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue"
import router from "@/router";
import {zhao} from "@/api/productList.js"

let dis=ref("none")
let ddi=ref("none")
let res=ref("silver")
let ddi1=ref("none")
let res1=ref("silver")
let ddi2=ref("none")
let res2=ref("silver")
let searchInputText = ref(null)
let searchInputText1 = ref(null)
let searchInputText2 = ref(null)
let yanj=ref(0)
let password=ref("password")
let res3=ref("none")
let obj=reactive({
    username:"",
    password:"",
    password1:""
})
let zhao1=()=>{
    zhao(obj)
        .then((res)=>{
            console.log(res)
            if(res=="修改成功"){
               router("/login")
               alert("修改成功")
        }else{
            alert("用户名错误")
        }
    })
}
let wid=computed(function(){
  return yanj.value+"px"
})
let yan=()=>{
    if(yanj.value==0){
      yanj.value+=-21
      password.value="text"
    }else if(yanj.value==-21){
      yanj.value=0
      password.value="password"
    }
}
let wang2=()=>{
  if(!obj.password1){
    res.value="silver"
    ddi.value="none"
    res1.value="silver"
    ddi1.value="none"
    res2.value="red"
    ddi2.value="block"
  }else{
    res.value="silver"
    ddi.value="none"
    res1.value="silver"
    ddi1.value="none"
    res2.value="silver"
    ddi2.value="none"
  }
  
}
let wang1=()=>{
  if(!obj.password){
    res.value="silver"
    ddi.value="none"
    res1.value="red"
    ddi1.value="block"
    res2.value="silver"
    ddi2.value="none"
  }else{
    res.value="silver"
    ddi.value="none"
    res1.value="silver"
    ddi1.value="none"
    res2.value="silver"
    ddi2.value="none"
  }
 
}
let wang=()=>{
  if(!obj.username){
    res.value="red"
    ddi.value="block"
    res1.value="silver"
    ddi1.value="none"
    res2.value="silver"
    ddi2.value="none"
  }else{
    res.value="silver"
    ddi.value="none"
    res1.value="silver"
    ddi1.value="none"
    res2.value="silver"
    ddi2.value="none"
  }
  
}
let huoqu=()=>{
  dis.value="block"
}
let open=()=>{ 
  res3.value="block"
  dis.value="none"
  setTimeout(ttom,3000)
}
let ttom=()=>{
  res3.value="none"
  }
let qu=()=>{
  dis.value="none"
}
let huo=()=>{
  dis.value="none"
}
</script>

<style lang="scss" scoped>
body{
    margin: 0;
    padding: 0;
    #apo {
        margin: 0;
        padding: 0;
        font-weight: normal;
      }
  }
  .top{
    position: relative;
    top: 0;
    height: 44px;
    font-size: 15px;
    line-height: 43px;
    text-align: center;
    border-bottom:1px solid silver;
    position: fixed;
    background-color: #fff;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    h1{
      margin: auto;
      margin: 0px 64px 0px 64px;
    }
    .top-z-1{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      padding-right: 12px;
      padding-left: 32px;
      color: silver;
      background-color: #fff;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      
    }
    .top-z-1::before{
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 8px;
      height: 8px;
      margin: -5px 0 0 14px;
      border-top: solid 1px #404040;
      border-right: solid 1px #404040;
      transform: rotate(-135deg);
    }
  
  }
  .top-z{
    width: 100%;
      box-sizing: border-box;
      .top-z-a{
        height: 400px;
        padding: 5px 40px 32px 32px;
        padding-top: 66px;
        .t11{
          border-bottom: 1px solid v-bind(res);
        }
        .t22{
          border-bottom: 1px solid v-bind(res1);
        }
        .t33{
          border-bottom: 1px solid v-bind(res2);
        }
        .top-z-b{
          position: relative;
          background-color: #fff;
          height: 70px;
          
          
              .top-z-inp{
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  border: none;
                  outline: none;
              }
              .top-z-p1{
                width: 100%;
                height: 32px;
                background-color: red;
                text-align: center;
                line-height: 32px;
                left: 0;
                right: 0;
                top: 44px;
                z-index: 101;
                display: v-bind(ddi);
                position: fixed;
              }
              .top-z-p2{
                width: 100%;
                height: 32px;
                background-color: red;
                text-align: center;
                line-height: 32px;
                left: 0;
                right: 0;
                top: 44px;
                z-index: 101;
                display: v-bind(ddi1);
                position: fixed;
              }
              .top-z-p3{
                width: 100%;
                height: 32px;
                background-color: red;
                text-align: center;
                line-height: 32px;
                left: 0;
                right: 0;
                top: 44px;
                z-index: 101;
                display: v-bind(ddi2);
                position: fixed;
              }
              .top-z-i{
                width: 100%;
                height: 100%;
                display: flex;
                .top-z-inp1{
                  flex: 9.6;
                  height: 100%;
                  box-sizing: border-box;
                  border: none;
                  outline: none;
                }
                .top-z-i1{
                  flex: 0.4;
                  display: block;
                }
                .top-z-i1::before{
                      content: "";
                      position: absolute;
                      top: 50%;
                      right: 2.5px;
                      width: 20px;
                      height: 20px;
                      background: url(https://sta.doumistatic.com/src/image/jianzhi/mobile/form/icon_form.png?v=170712) no-repeat 0 0;
                      background-size: 100px auto;
                      margin-top: -10px;
                      margin-left: -10px;
                      background-position: v-bind(wid) 0;
                }
              }
              
            .top-z-b1{
              width: 100%;
              height: 100%;
              display: flex;
              .top-z-inp2{
                flex: 8;
                height: 100%;
                box-sizing: border-box;
                border: 1px;
                outline: none;
            }
            .top-z-b2{
              flex: 3;
              height: 100%;
              box-sizing: border-box;
              .top-z-b3{
                width: 100%;
                height: 30px;
                font-size: 12px;
                text-align: center;
                margin-top: 25px;
                line-height: 28px;
                border: 0;
                background-color: #fff;
                color: silver;
                border-left: 1px solid silver;
              }
            }
          }
        }
        .top-z-d{
          width: 100%;
          height: 45px;
          background-color:#fc0;
          margin-top: 30px;
          border-radius: 5px;
          text-align: center;
          line-height: 45px;
          font-size: 16px;
          border: 0;
        }
        .top-z-w{
          margin-top: 15px;
          font-size: 14px;
          span{
            display: inline-block;
            position: absolute;
            right:0;
          }
        }
      }
  }
  .ttop-1{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4) ;
    position:absolute;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    display: v-bind(dis);
   
  }
  .ttop-2{
    width: 250px;
    height: 300px;
    background-color:white;
    border: 1px solid silver;
    border-radius: 20px;
    margin:5% auto;
    position: fixed;
    display: v-bind(dis);
    top: 0;
    left: 40%;
    z-index: 999999;
    .ttop-3{
      width: 100%;
      height: 100px;
      background:url(https://sta.doumistatic.com/src/image/jianzhi/mobile/form/bg_popup.png) no-repeat 0 -210px padding-box;
      background-size: 266px auto;
      border-radius: 20px 20px 0 0;
    }
    .ttop-4{
      position: relative;
      font-size: 12px;
      line-height: 20px;
      text-align: left;
      padding: 12px 16px;
      overflow: hidden;
    }
    .ttop-5{
      height: 44px;
      margin: 0px 15px 0px 15px;
      border: 1px solid silver;
      display: flex;
        input{
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        border: 0 none;
        color: #404040;
        background-color: transparent;
        font-size: 14px;
        line-height: normal;
        padding: 12px;
        border: 0;
        outline: none;
        -webkit-appearance: none;
        }
        .ttop-6{
          position: absolute;
          top: 0;
          right: 0;
          width: 90px;
          height: 100%;
          overflow: hidden;
          img{
            position: absolute;
            width: 101%;
            height: 101%;
          }
        }
    }
    .ttop-7{
      margin: 24px 8px;
      display: flex;
      .ttop-8{
          margin: 0px 7px 0 25px;
          width: 150px;
          height: 45px;
          border: 0;
          background-color: white;
      }
      .ttop-9{
        margin: 0px 25px 0 7px;
        width: 150px;
        height: 45px;
        border: 0;
        border-radius: 5px;
        background-color:yellow;
    }
    }
  }
  .too{
    display: v-bind(res3);
    position: absolute;
    bottom:0;
    top: 5%;
    left: 45%;
    right: 0;
    width: 150px;
    height: 50px;
    position: fixed;
    z-index: 9999999;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    background-color: aquamarine;
  }
</style>